<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('list,vue'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/account/css/menu.css" />

    <script type="text/javascript" src="html/manager/account/js/menu.js"></script>

</head>
<body>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="tempid" class="display-none" />
		<input type="text" id="flag" class="display-none" />

		<div class="title-bar">
            <div class="title">菜单管理</div>
            <button type="button" class="layui-btn btnAdd" onclick="addMenu()">添加新菜单</button>
        </div>

        <div class="query-bar">
        	<div class="search-left">
        		<select id="isuse" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部状态</option>
                    <option value="1">启用</option>
                    <option value="0">关闭</option>
                </select>
                <select id="menutype0" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部类型</option>
                    <option value="0">顶部导航</option>
                    <option value="1">左侧菜单</option>
                </select>
                <select id="menugrade0" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部等级</option>
                    <option value="0">父菜单</option>
                    <option value="1">功能菜单</option>
                </select>
                <select id="useto" class="ddlist" onchange="queryKey('ddl')">
                    <option value="" selected="selected">全部用途</option>
                    <option value="0">用于pc/wap端</option>
                    <option value="1">用于pc端</option>
                </select>
        	</div>
        	<div class="search-right">
        		<input type="text" id="keyword" class="keyword" placeholder="请输入菜单名称" autocomplete="off" />
                <button type="button" class="btnOk" onclick="queryKey('ok')">确定</button>
        	</div>
        </div>

        <div class="tongji-bar">
        	<span class="tongji">共<span id="listCount" class="tc1"></span>个菜单</span>
        </div>

        <div id="listBar" class="table-bar">
        	<table class="table-box">
        		<tr class="tr-head">
					<td class="td-head hw1">编号</td>
					<td class="td-head hw1">图标</td>
					<td class="td-head">菜单名称</td>
					<td class="td-head hw2">类型</td>
					<td class="td-head hw2">等级</td>
					<td class="td-head hw2">打开方式</td>
                    <td class="td-head hw2">用途</td>
					<td class="td-head hw1">状态</td>
					<td class="td-head hw1">顺序</td>
                    <td class="td-head hw1">操作项</td>
					<td class="td-head hw2">操作</td>
				</tr>
				<tr class="tr-item" v-for="menu in list">
					<td class="td-item-center hw1">{{ menu.id }}</td>
					<td class="td-item-center hw1">
						<template v-if="menu.type == '左侧菜单'">
                    		<img v-bind:src="menu.icon" class="item-pic1" />
                    	</template>
				        <template v-else>
				            -
				        </template>
					</td>
					<td class="td-item-left">{{ menu.name }}</td>
					<td class="td-item-center hw2">{{ menu.type }}</td>
					<td class="td-item-center hw2">{{ menu.grade }}</td>
					<td class="td-item-center hw2">{{ menu.mode }}</td>
                    <td class="td-item-center hw2">{{ menu.useto }}</td>
					<td class="td-item-center hw1">
						<template v-if="menu.isuse == 1">
                    		启用
                    	</template>
                    	<template v-else-if="menu.isuse == 0">
				            <span class="tc1">关闭</span>
				        </template>
				        <template v-else>
				            状态有误
				        </template>
					</td>
					<td class="td-item-center hw1">{{ menu.sx }}</td>
                    <td class="td-item-center hw1">
                        <template v-if="menu.grade == '功能菜单'">
                            <span class="item-edit2" v-on:click="setOperate(menu.id, menu.name)">设置</span>
                        </template>
                    </td>
					<td class="td-item-center hw2">
                        <span class="item-edit" v-on:click="editMenu(menu.id)">编辑</span>
	                    <span class="item-delete" v-on:click="deleteMenu(menu.id, menu.name)">删除</span>
					</td>
				</tr>
        	</table>
        </div>

        <?php $this->import('page'); ?>
        <?php $this->import('slipiframe'); ?>

        <script type="text/javascript">
        	var menuList = new Vue({
	            el: '#listBar',
	            data: {
	                list: ''
	            }
	        });
        </script>

        <div id="writeBar" style="display: none;">
        	<div class="write-bar">
        		<div id="writeTitle" class="write-title">添加新菜单</div>
        		<div class="write-content">
                    <div class="write-tr1">
                        <div class="write-field1">菜单名称：</div>
                        <div class="write-value1">
                            <input type="text" id="menumc" class="write-input1" placeholder="请输入名称" autocomplete="off" />
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">顺序：</div>
                        <div class="write-value1">
                            <input type="text" id="menusx" class="write-input1" placeholder="请输入数字" autocomplete="off" onkeyup="validationNumber(this, 0)" />
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">用途：</div>
                        <div class="write-value1">
                            <input type="radio" name="menuuseto" class="write-chenk1" value="0" />用于pc/wap端
                            <input type="radio" name="menuuseto" class="write-chenk2" checked="checked" value="1" />用于pc端
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">状态：</div>
                        <div class="write-value1">
                            <input type="radio" name="menustatus" class="write-chenk1" checked="checked" value="1" />启用
                            <input type="radio" name="menustatus" class="write-chenk2" value="0" />关闭
                        </div>
                    </div>
                    <div class="write-tr1">
                        <div class="write-field1">选项：</div>
                        <div class="write-value1">
                            <select id="menutype" class="write-select2" onchange="selectMenutype()">
                                <option value="">类型</option>
                                <option value="0">顶部导航</option>
                                <option value="1">左侧菜单</option>
                            </select>
                            <select id="menugrade" class="write-select2" style="display: none;" onchange="selectMenugrade()">
                                <option value="">等级</option>
                                <option value="0">父菜单</option>
                                <option value="1">功能菜单</option>
                            </select>
                            <select id="menuparent" class="write-select2" style="display: none;">
                                <option value="">上一级</option>
                            </select>
                            <select id="menumode" class="write-select2" style="display: none;">
                                <option value="">打开方式</option>
                                <option value="blank">新窗口</option>
                                <option value="link">原窗跳转</option>
                            </select>
                        </div>
                    </div>
                    <div id="menuurlBar" class="write-tr1" style="display: none;">
                        <div class="write-field1">链接：</div>
                        <div class="write-value1">
                            <input type="text" id="menuurl" class="write-input2" placeholder="请输入链接" autocomplete="off" />
                        </div>
                    </div>
                    <div id="menupicBar" class="write-tr2" style="display: none;">
                        <div class="write-field2">图标：</div>
                        <div class="write-value2">
                            <div id="selectImg" class="write-button2">选择图片</div><span class="imgSize">图片尺寸:200*200，不大于30k</span><br />
                            <img id="menupic" src="" class="write-img1" alt="" />
                        </div>
                    </div>
        		</div>
        		<div class="write-button">
                    <div class="write-button-ok" onclick="saveMenuInfo(this)">确定</div>
                    <div class="write-button-cancel" onclick="closeWriteDiv()">取消</div>
                </div>
        	</div>
        </div>

	</div>

</body>
</html>